import React from 'react'
import { Link } from 'react-router-dom'
import { Result, Button } from 'antd'
import { useRecoilValue } from 'recoil'
import { userInfo } from '@/store/userInfo'
import { hasPermissionRoles } from '@/utils/router'

const Forbidden = (
  <Result
    status={403}
    title='403'
    subTitle='Sorry, you are not authorized to access this page.'
    extra={
      <Button type='primary'>
        <Link to='/'>Go Home</Link>
      </Button>
    }
  />
)

export interface ALinkProps {
  children: React.ReactNode
  role?: string | string[]
  noNode?: React.ReactNode
}

const Permission: React.FC<ALinkProps> = ({ role, noNode = Forbidden, children }) => {
  // console.log('noNode🚀🚀🚀🚀', noNode)
  const user = useRecoilValue(userInfo)
  return hasPermissionRoles(user?.perms, role) ? <>{children}</> : <>{noNode}</>
}

export default Permission
